import React, { useState, useEffect, useRef } from 'react';
import { Button, Input, Select } from 'antd';
import { history } from 'umi';
const { Search } = Input;
import styles from './index.less';
import axios from 'axios';



type Props = {}

const index = (props: Props) => {
  const [liveList, setLiveList] = useState([]);
  const [Nlist, setNlist] = useState([])
  
  

  useEffect(() => {
    const getlive = async () => {
      await axios.get('http://127.0.0.1:7001/live/getliveList').then((res) => {
        setLiveList(res.data.data);
        // console.log(res.data.data);
        setNlist(res.data.data)
      })
    }

    getlive();
  }, [])



  //设置高亮
  const [activeTab, setActibeTab] = useState(0);
  const handleClick = (type: any, index: any) => {
    setActibeTab(index);
    if (type === '全部直播') {
      setLiveList(Nlist)
    } else {
      let newArr = Nlist.filter((item: any) => item.type === type)
      setLiveList(newArr)
    }
  }

  //搜索
  // const inputDom = useRef<HTMLInputElement>(null)
  const onSearch = (value: string) => {
    // console.log(value);

    const newlist = liveList.filter((item: any) => item.name.includes(value))
    setLiveList(newlist);
  }

  let arr = ['全部直播', '直播', '已结']
  return (
    <div className={styles.box}>
      

      <p className={styles.p1}>
        <span>直播状态:</span>
        <select name="" id="">
          <option value="">请选择</option>
          <option value="">直播中</option>
          <option value="">已结束</option>
        </select>
        <span>经纪人搜索</span>
        <Search placeholder="姓名" onSearch={onSearch} style={{ width: "300px", marginTop: '10px' }} enterButton />
        {/* <Search addonBefore="" placeholder="input search text" allowClear  /> */}
      </p>
      <p className={styles.p2}>
        {
          arr && arr.map((item: any, index: number) => {
            return <span key={index} className={activeTab === index ? styles.active : ''} onClick={() => handleClick(item, index)}>{item}</span>
          })
        }

      </p>

      {/* 直播渲染 */}


      <div className={styles.live}>
        {
          liveList && liveList.map((item: any, index: number) => {
            return (
              <dl key={index}>
                <dt><img src={item.img} alt="" onClick={()=>{
                    history.push(
                      '/Lbordercast/liveDetail'
                    )
                }}/></dt>
                <dd>{item.title}</dd>
                <dd >{item.name} <span style={{ marginLeft: '15px' }}>2020.12.12</span></dd>
                <span className={styles.pp}>{item.type}</span>
              </dl>
            )

          })
        }
      </div>

    </div>
  )
}

export default index